<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bedoging.com Images Library</title>
<link rel="stylesheet" type="text/css" href="/js/uploader/uploader.css" />
<link rel="stylesheet" type="text/css" href="/Styles/global.css" />
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/js/jquery.tools.min.js"></script>
<script type="text/javascript" src="/js/ajaxf.js"></script>
<script type="text/javascript" src="/js/editor/xheditor-zh-cn.js"></script>
<script type="text/javascript" src="/js/global.js"></script>
<script type="text/javascript" src="/js/uploader/swfupload.js"></script>
<script type="text/javascript" src="/js/uploader/queue.js"></script>
<script type="text/javascript" src="/js/uploader/fileprogress.js"></script>
<script type="text/javascript" src="/js/uploader/handlers.js"></script>
<script type="text/javascript" src="/js/uploader/lang/zh-cn.js"></script>
</head>
<body>
    <div id="bd-uploader">
		<div class="flash" id="fsUploadProgress"></div>
	   <div id="buttonArea">
	       <input class="fl" type="checkbox" name="select-all-pic" id="select-all-pic" />
	       <a href="javascript:void(0);" id="get-pics" class="btn fl" title="点击这里把选中的图片插入到编辑器中"><span><div id="div-get-pics">引用图片</div></span></a>
	       <a href="javascript:void(0);" id="addFiles" class="btn fl" title="点击这里上传图片"><span><div id="divAddFiles">添加文件</div></span></a>
	   </div>
	   <div id="photo-list">
	       <span class="fl note" style="padding:0 0 0 10px;">1.双击图片把该图片插入编辑器； 2.单击选中图片后点击"引用图片"把选中的图片插入编辑器中。 </span>
	   <ul></ul>
	   </div>
	   <div id="photo-paging">
	     <a href="#" onclick="load();return false;">头页</a>
	     <a href="#" onclick="load();return false;">上一页</a>
	     <a href="#" onclick="load();return false;">1</a>
	     <a href="#" onclick="load();return false;">2</a>
	     <a href="#" onclick="load();return false;">3</a>
	     <a href="#" onclick="load();return false;">4</a>
	     <a href="#" onclick="load();return false;">下一页</a>
	     <a href="#" onclick="load();return false;">尾页</a>
	   </div>
	</div>
<script type="text/javascript">
//<!CDATA[
$(document).ready(function(){
	$.ajaxf.init('/js/AJAX.swf?'+Math.random());
});
$.ajaxf.ready(function(){
	var imgLibUri = 'http://www.a.com/test/testData/photos.js';
	$.ajaxf.postJSON(imgLibUri, '', function(r){		
		showPhotos(r);
		return;
	});
});

var swfu;
$(function() {
	var settings = {
		flash_url : "/js/uploader/swfupload.swf",
		upload_url: "http://www.a.com/test/upload.php",
		post_params: {"param" : "param value"}, // json格式
		file_size_limit : "552 MB",
		file_types : "*.jpg;*.gif;*.png",		
		file_types_description : "图片",
		file_upload_limit : 12,
		file_queue_limit : 0,
		custom_settings : { progressTarget : "fsUploadProgress"},
		
		debug: false,

		// Button settings
		button_image_url: "/js/uploader/images/add.gif",
		button_width: 80,
		button_height: 17,
		button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
		button_cursor: SWFUpload.CURSOR.HAND,
		button_placeholder_id: "divAddFiles",
		button_text: '<span class="theFont">上传图片</span>',
		button_text_style: ".theFont {color:#006699; }",
		button_text_left_padding: 20,
		button_text_top_padding: 0,
		
		// The event handler functions are defined in handlers.js
		file_queued_handler : fileQueued,
		file_queue_error_handler : fileQueueError,
		file_dialog_complete_handler : fileDialogComplete,
		upload_start_handler : uploadStart,
		upload_progress_handler : uploadProgress,
		upload_error_handler : uploadError,
		upload_success_handler : uploadFinishHandler,
		upload_complete_handler : uploadComplete,
		queue_complete_handler : queueComplete
	};

	swfu = new SWFUpload(settings);
 });
 
/**
 * 上传成功后执行
 */
function uploadFinishHandler(file, r) {	
	eval('var r = ' + r);
	html = '<li class="checked" id="photo-list-item-'+file.id+'">'
		 + '  <input class="check-pic" type="checkbox" name="check-pic[]" value="' + file.id +'" checked="checked" />'
		 + '  <input type="hidden" class="checked-pic-src" id="checked-pic-src-'+file.id+'" value="' + r['Img']+'" />'
		 + '  <p><img class="pic" src="'+ r['Thumb'] + '" width="98" height="98" ></p>'
		 + '  <p id="checked-pic-title-'+file.id+'" class="pic-title">'+r['Title']+'</p>'
		 + '</li>';
	$('#photo-list ul').prepend(html);
}

/**
 * 显示已上传的图片
 */
function showPhotos(r) {	
	if(r.Err) {
		// 没有权限则转到登录页
		if('denned' == r.Err) {
		    parent.window.location=''; // 转到登录页
		    return;
		}
		
		// 显示错误信息
		$('#photo-list ul').html('<p class="err">'+r.Err+'</p>');
		return;
	}
	
	var html = '';
	var imgs = r.Imgs;
	if(imgs.length <= 0) {
		html += '<p id="no-upload-pic">您还没有上传图片！</p>';
	} else {
		html = '';
		for(var i in imgs) {
			html += '<li id="photo-list-item-'+i+'">'
				  + '  <input class="check-pic" type="checkbox" name="check-pic[]" value="' + i +'" />'
				  + '  <input type="hidden" class="checked-pic-src" id="checked-pic-src-'+i+'" value="' + imgs[i]['Img']+'" />'
				  + '  <p><img class="pic" src="'+ imgs[i]['Thumb'] + '" width="98" height="98" ></p>'
				  + '  <p id="checked-pic-title-'+i+'" class="pic-title">'+imgs[i]['Title']+'</p>'
				  + '</li>';
		}
		
	}
	
	//alert(html);
	$('#photo-list ul').html(html);
	
	// 点击图片选中
	$('#photo-list img').click(function(){
		$(this).parent().parent().find('input').attr('checked', 'checked');
		$(this).parent().parent().addClass('checked');
	});
	
	$('#photo-list img').dblclick(function(){
		if((typeof get_one_pic_handler)=='function'){
			var parent = $(this).parent().parent();
			var pic = new Object();
			pic.src = parent.find('.checked-pic-src').attr('value');
			pic.title = parent.find('.pic-title').text();
			get_one_pic_handler(pic);
		}
	});
	
	// 添加和去掉被选中状态样式
	$('#photo-list input').click(function(){
		var li = $(this).parent();
		if(li.hasClass('checked')) {
			li.removeClass('checked');
		} else {
			li.addClass('checked');
		}
	});
	
	// 选中或去掉所有选择的图片
	$('#bd-uploader #select-all-pic').click(function(){
		if(!$(this).attr('checked')) {
			$('#photo-list input').removeAttr('checked')
			$('#photo-list li').removeClass('checked')
		} else {
			$('#photo-list input').attr('checked', 'checked')
			$('#photo-list li').addClass('checked')
		}
	});

	$('#get-pics').click(function(){
		var pics = new Array();
		var obj = $('#photo-list input.check-pic:checked');
		if(obj.length <= 0) {
			alert('请选择图片');
			return;
		}
		
		for(var i = 0; i< obj.length; i++) {
			var pic = new Object();
			pic.src = $('#checked-pic-src-'+obj[i].value).attr('value');
			pic.title = $('#checked-pic-title-'+obj[i].value).text();
			pics.push(pic);
		}
		
		get_pics_handler(pics);
	});
	
}

//]]>
</script>
</body>
</html>